{% extends '../common/layout.njk' %}
{% set activeNav = '正则解析工具'%}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/public/css/regexper.min.css">
{% endblock %}
{%block description%}{{super()}}|js 正则表达式工具{%endblock%}
{%block keywords%}
{{super()}},regexp,正则表达式
{%endblock%}
{%block title%}
{{super()}}|js 正则表达式工具
{%endblock%}
{% block body %}
<div class="regexper app">
<div id="app">
    <div class="application container-fluid">
        <form id="regexp-form">
            <div class="form-group">
                <div class="input-group">
                    <input id="regexp-input" autofocus="autofocus" class="form-control"
                           placeholder="请输入JavaScript风格的正则表达式">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-outline-secondary">Display</button>
                    </div>
                </div>
            </div>

            <a href="#" class="btn btn-primary" data-action="download" type="image/svg+xml">下载图片</a>
        </form>
        <div class="results">
            <div id="regexp-error" style="white-space: pre-wrap;"></div>

            <ul id="regexp-warnings"></ul>

            <div id="regexp-render"></div>
        </div>
    </div>
    <script type="text/html" id="svg-container-base">
        <div class="svg">
            <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:cc="http://creativecommons.org/ns#"
                    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                    version="1.1">
                <defs>
                    <style type="text/css">svg {
                        background-color: #fff; }

                    .root text,
                    .root tspan {
                        font: 12px Arial; }

                    .root path {
                        fill-opacity: 0;
                        stroke-width: 2px;
                        stroke: #000; }

                    .root circle {
                        fill: #6b6659;
                        stroke-width: 2px;
                        stroke: #000; }

                    .anchor text, .any-character text {
                        fill: #fff; }

                    .anchor rect, .any-character rect {
                        fill: #6b6659; }

                    .escape text, .charset-escape text, .literal text {
                        fill: #000; }

                    .escape rect, .charset-escape rect {
                        fill: #bada55; }

                    .literal rect {
                        fill: #dae9e5; }

                    .charset .charset-box {
                        fill: #cbcbba; }

                    .subexp .subexp-label tspan,
                    .charset .charset-label tspan,
                    .match-fragment .repeat-label tspan {
                        font-size: 10px; }

                    .repeat-label {
                        cursor: help; }

                    .subexp .subexp-label tspan,
                    .charset .charset-label tspan {
                        dominant-baseline: text-after-edge; }

                    .subexp .subexp-box {
                        stroke: #908c83;
                        stroke-dasharray: 6,2;
                        stroke-width: 2px;
                        fill-opacity: 0; }

                    .quote {
                        fill: #908c83; }
                    </style>
                </defs>
                <metadata>
                    <rdf:RDF>
                        <cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/">
                            <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
                            <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
                            <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"/>
                            <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"/>
                            <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
                        </cc:License>
                    </rdf:RDF>
                </metadata>
            </svg>
        </div>
        <div class="progress">
            <div style="width:0;"></div>
        </div>
    </script>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript" src="/public/js/regexper.min.js"></script>
{% endblock %}